<template>
  <el-select v-model="selectedOnlineState" style="width: 350px;" @change="handleChange" clearable>
    <el-option
      v-for="onlineState in onlineStateList"
      :key="onlineState.value"
      :label="onlineState.name"
      :value="onlineState.value"
    />
  </el-select>
</template>

<script>
export default {
  name: 'SelectDeviceOnlineState',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: { required: false }
  },
  data() {
    return {
      selectedOnlineState: '',
      onlineStateList: []
    }
  },
  watch: {
    value() {
      this.selectedOnlineState = this.value
    }
  },
  created() {
    this.initData()
  },
  methods: {
    initData() {
      this.onlineStateList = [
        {
          name: '在线',
          value: true
        },
        {
          name: '离线',
          value: false
        }
      ]
    },
    handleReset() {
      this.selectedOnlineState = ''
      this.handleChange('')
    },
    handleChange(value) {
      this.$emit('change', value)
    }
  }
}
</script>

<style scoped></style>
